<template>
    <div>
        <el-container style="height:700px;border:1px solid #eee">
            <!-- 头部 -->
            <el-header>
                <div style="font-size:40px;background-color:rgba(163, 165, 166, 0.258);">tlias辅助系统</div>
            </el-header>
            <el-container>
                <!-- 左侧 -->

                <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                    <el-menu :default-openeds="['1']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">
                                    <router-link to="/depts" style="text-decoration: none;">
                                        部门管理
                                    </router-link>
                                </el-menu-item>
                                <el-menu-item index="1-2">
                                    <router-link to="/emp" style="text-decoration: none;">
                                        员工管理
                                    </router-link>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!-- 中间 -->
                <el-main>

                    <!-- 查询行 -->
                    <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                        <el-row>
                            <el-col :span="4" :offset="20">
                                <el-form-item>
                                    <el-button type="primary" @click="openAddDept">添加部门</el-button>
                                    <el-dialog class="changePrice" v-model="dialogAddDeptVisible" title="添加部门"
                                        width="560">
                                        
                                        <el-input class="input" v-model="inputDeptName"
                                            placeholder="请输入部门名称"></el-input>
                                        <div slot="footer" class="dialog-footer">
                                            <el-button @click="dialogAddDeptVisible = false">取 消</el-button>
                                            <el-button type="primary" @click="addDept">确 定</el-button>
                                        </div>
                                    </el-dialog>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <!-- 中心表格 -->
                    <el-table :data="tableData" border style="width: 100%;">
                        <el-table-column prop="id" label="序号" width="180" align="center">

                        </el-table-column>
                        <el-table-column prop="name" label="部门名称" width="250" align="center">
                        </el-table-column>
                        <el-table-column prop="updateTime" label="最后操作时间" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <!-- 用插槽的方式获得数据 -->
                            <template #default="scope">
                                <el-button type="primary">修改</el-button>

                                <el-button @click="deleteDept(scope.row.id)" type="danger">删除</el-button>
                            </template>
                        
                        </el-table-column>
                    </el-table>
                    <br>


                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                tableData: [],
                searchInfo: {
                    name: "",
                    sex: "",
                    startDate: []
                },
                inputDeptName: "",
                dialogAddDeptVisible:false


            }
        },
        methods: {
            onSubmit: function () {
                alert("查询")
            },
            handleSizeChange: function (val) {
                alert("页码变换" + val);
            },
            handleCurrentChange: function (val) {
                alert("页码变换" + val);
            },
            deleteDept: function (val) {
                axios.delete("http://localhost:8080/depts/" + val).then((result) => {
                    if (result.data.code == 1) {
                        axios.get("http://localhost:8080/depts").then((result) => {
                            this.tableData = result.data.data;
                        })
                    }
                });
            },
            addDept:function()
            {
                this.dialogAddDeptVisible = false;
                axios.post("http://localhost:8080/depts",this.inputDeptName).then((result)=>{
                    if(result.data.code == 1)
                    {
                        axios.get("http://localhost:8080/depts").then((result) => {
                            this.tableData = result.data.data;
                        });
                    }
                });
            },
            openAddDept:function()
            {
                this.dialogAddDeptVisible = true;
            }
        },
        mounted() {
            // 发布异步请求
            axios.get("http://localhost:8080/depts").then((result) => {
                this.tableData = result.data.data;
            });
        },
    };
</script>

<style>
</style>